<template>
  <div class="identity-wrapper">
    <!--标题-->
    <v-title>{{$t('message.personalIdentityAuthentication')}}</v-title>
    <template v-if="status === 0 || status === 1 || status === 4">
      <!--内容-->
      <div class="person-info">
        <div class="person-title">
          <div class="person-title-text">
            {{$t('message.personalIdentityPersonalInfo')}}
          </div>
          <div class="person-title-tip" v-if="status === 4">
            <div class="tip-warning">
              <div class="tip-icon-warning" @mouseenter="showTip" @mouseleave="hideTip"></div>
              <div class="tip-warning-text" v-if="isShowTip">
                <div class="tip-triangle"></div>
                {{$t('message.personalIdentitySchoolInfoDescribe')}}
              </div>
            </div>
            <div class="tip-text">{{$t('message.personalIdentitySchoolInfoTip')}}</div>
          </div>
        </div>
        <div class="person-row">
          <div class="person-key">{{$t('message.personalIdentityName')}}：</div>
          <div class="person-value">
            <span v-if="status === 1 || status === 4 || status0ShowWhat === 'iden'">{{ name }}</span>
            <span class="tips" v-else>{{$t('message.personalIdentityNoCertification')}}</span>
          </div>
        </div>
        <div class="person-row">
          <div class="person-key">{{$t('message.personalIdentityGender')}}：</div>
          <div class="person-value">
            <span v-if="status === 1 || status === 4 || status0ShowWhat === 'iden'">{{ gender }}</span>
            <span class="tips" v-else>{{$t('message.personalIdentityNoCertification')}}</span>
          </div>
        </div>
        <div class="person-row">
          <div class="person-key-id">{{$t('message.personalIdentityIdentificationNumber')}}：</div>
          <div class="person-value">
            <span v-if="status === 1 || status === 4 || status0ShowWhat === 'iden'">{{ IDcard }}</span>
            <span class="tips" v-else>{{$t('message.personalIdentityNoCertification')}}</span>
          </div>
        </div>
      </div>
      <div class="school-info">
        <div class="person-title">
          <div class="person-title-text">
            {{$t('message.personalIdentitySchoolInfo')}}
          </div>
          <div class="person-title-tip" v-if="status === 4">
            <div class="tip-warning">
              <div class="tip-icon-warning" @mouseenter="showTip" @mouseleave="hideTip"></div>
              <div class="tip-warning-text" v-if="isShowTip">
                <div class="tip-triangle"></div>
                {{$t('message.personalIdentitySchoolInfoDescribe')}}
              </div>
            </div>
            <div class="tip-text">{{$t('message.personalIdentitySchoolInfoTip')}}</div>
          </div>
        </div>
        <div class="person-row">
          <div class="person-key">{{$t('message.personalIdentitySchool')}}：</div>
          <div class="person-value">
            <span v-if="status === 1 || status === 4 || status0ShowWhat === 'stud'">{{ school }}</span>
            <span class="tips" v-else>{{$t('message.personalIdentityNoCertification')}}</span>
          </div>
        </div>
        <div class="person-row">
          <div class="person-key">{{$t('message.personalIdentityGrade')}}：</div>
          <div class="person-value">
            <span v-if="status === 1 || status === 4 || status0ShowWhat === 'stud'">{{ grade }}</span>
            <span class="tips" v-else>{{$t('message.personalIdentityNoCertification')}}</span>
          </div>
        </div>
        <div class="person-row">
          <div class="person-key">{{$t('message.personalIdentityMajoy')}}：</div>
          <div class="person-value">
            <span v-if="status === 1 || status === 4 || status0ShowWhat === 'stud'">{{ majoy }}</span>
            <span class="tips" v-else>{{$t('message.personalIdentityNoCertification')}}</span>
          </div>
        </div>
        <div class="person-row">
          <div class="person-key">{{$t('message.personalIdentityNumber')}}：</div>
          <div class="person-value">
            <span v-if="status === 1 || status === 4 || status0ShowWhat === 'stud'">{{ studentid }}</span>
            <span class="tips" v-else>{{$t('message.personalIdentityNoCertification')}}</span>
          </div>
        </div>
      </div>
      <button type="button" class="btn-authenticate" v-if="status === 0" @click="toSetIdentity">{{$t('message.personalIdentityToSetIdentify')}}</button>
      <button type="button" class="btn-authenticate" v-if="status === 4" @click="toUpdateIdentity">{{$t('message.personalIdentityToUpdateIdentity')}}</button>
    </template>
    <div class="personal-identity-review" v-if="status === 2">
      <div class="identity-review-ing"></div>
      <div class="identity-review-title">{{$t('message.personalIdentityIdentifyChecking')}}</div>
    </div>
    <div class="personal-identity-review" v-if="status === 3">
      <div class="identity-review-fail"></div>
      <div class="identity-review-title">
        <!-- <template v-if="confirmFailMsg.length === 1">
          <template v-if="confirmFailMsg[0].type === 'credit_identificationscanning'">
            {{$t('message.personalIdentityIdentifyCheckingFailed')}}
          </template>
          <template v-else-if="confirmFailMsg[0].type === 'credit_graducation'">
            {{$t('message.personalIdentityStudentCheckingFailed')}}
          </template>
        </template>
        <template v-else-if="confirmFailMsg.length === 2">
          {{$t('message.personalIdentityAllCheckingFailed')}}
        </template> -->
        <template>
          {{$t('message.personalIdentityIdentifyCheckingFailed')}}
        </template>
      </div>
      <!-- 认证失败提示信息 -->
      <template v-for="(item, index) in confirmFailMsg">
        <p class="identity-review-tip" :key="index" v-if="item.type === 'credit_identificationscanning'">{{$t('message.personalIdentityIdentifyCheckingFailedDescribe') + item.message}}</p>
        <p class="identity-review-tip" :key="index" v-else-if="item.type === 'credit_graducation'">{{$t('message.educationFailedReason') + item.message}}</p>
        <p class="identity-review-tip" :key="index" v-else-if="item.type === 'user_contacts'">{{$t('message.contactsFailedReason') + item.message}}</p>
      </template>
      <p class="identity-review-tip">{{$t('message.personalIdentityIdentifyEdit')}}</p>
      <div class="btn-wrap">
        <button class="btn btn-white" type="button" @click="toChangeIdentity">{{$t('message.personalIdentityIdentifyEditBtn')}}</button>
      </div>
    </div>
  </div>
</template>

<script>
import VTitle from '@/components/base/VTitle'

export default {
  name: 'PersonalIdentity',
  components: {
    VTitle
  },
  data () {
    return {
      name: '',
      gender: '',
      IDcard: '',
      school: '',
      grade: '',
      majoy: '',
      studentid: '',
      isShowTip: false,
      status: 2,
      confirmFailMsg: [], // 认证失败信息
      dataExistsType: '', // res.code === 202 时返回已存在的认证类型
      changeStatus: ''
    }
  },
  mounted () {
    this.init()
    this.getAuthenStatus()
  },
  activated () {
    this.init()
    document.documentElement.scrollTop = 0
    document.body.scrollTop = 0
  },
  methods: {
    // 初始化身份认证状态
    init () {
      this.$ajax.identityInfo().then(res => {
        if (res.code === 200) {
          if (!res.data.real_name && !res.data.sex && !res.data.idno && !res.data.university && !res.data.specialty && !res.data.studentid) {
            this.status = 2 // 认证不通过
          } else {
            this.name = res.data.real_name
            this.gender = res.data.sex === 1 ? this.$t('message.male') : res.data.sex === 0 ? this.$t('message.female') : ''
            this.IDcard = res.data.idno
            this.school = res.data.university
            this.grade = res.data.grade
            this.majoy = res.data.specialty
            this.studentid = res.data.studentid
            this.status = 1 // 认证成功
          }
        } else if (res.code === 208) {
          this.name = res.data.real_name
          this.gender = res.data.sex === 1 ? this.$t('message.male') : res.data.sex === 0 ? this.$t('message.female') : ''
          this.IDcard = res.data.idno
          this.school = res.data.university
          this.grade = res.data.grade
          this.majoy = res.data.specialty
          this.studentid = res.data.studentid
          this.status = 4 // 认证信息已过期
        } else if (res.code === 202) {
          this.status = 0 // 尚未认证
        } else if (res.code === 204) {
          this.status = 2 // 审核中
        } else if (res.code === 206) {
          this.status = 3 // 认证不通过
          let arr = []
          for (let key in res.data) {
            if (key === 'user_fail_contacts') {
              if (res.data[key].length === 0) {
                console.log('res.data[key].length === 0')
              } else {
                arr.push({
                  type: 'user_contacts',
                  message: res.data[key][0].msg
                })
              }
            } else {
              arr.push(res.data[key])
            }
          }
          arr.forEach((item, index) => {
            if (item.status === 0) {
              arr[index].message = this.$t('message.personalIdentityNoCertification')
            }
          })
          this.confirmFailMsg = arr
        }
      }).catch(err => {
        this.$store.commit('alert', {
          switch: true,
          alertText: this.$t('message.errorMessage')
        })
      })
      // this.status = 4
    },
    showTip () {
      this.isShowTip = true
    },
    hideTip () {
      this.isShowTip = false
    },
    toSetIdentity () {
      this.$router.push({ path: this.computeHref })
    },
    toUpdateIdentity () {
      this.$router.push({ path: '/personal/edit/identity/update' })
      // this.$router.push({ path: '/personal/edit/identity/change' })
    },
    toChangeIdentity () {
      this.$router.push({ path: this.computeHref })
    },
    // 获取用户全部认证状态
    getAuthenStatus () {
      this.$ajax.getAuthenStatus().then(res => {
        if (res.code === 200) {
          this.changeStatus = `${res.data.id_status}${res.data.stu_status}${res.data.con_status}`
        } else {
          console.log(res.code, res.msg)
        }
      }).catch(err => {
        this.$store.commit('alert', {
          switch: true,
          alertText: this.$t('message.errorMessage')
        })
      })
    }
  },
  computed: {
    status0ShowWhat () {
      if (this.status === 0 && this.dataExistsType && this.dataExistsType === 'credit_identificationscanning') {
        return 'iden'
      } else if (this.status === 0 && this.dataExistsType && this.dataExistsType === 'credit_graducation') {
        return 'stud'
      } else {
        return 'empty'
      }
    },
    // 判断提交或下一步跳转的页面
    computeHref () {
      if (this.changeStatus[0] === '0') {
        return '/personal/edit/identity/set'
      } else if (this.changeStatus[0] === '1' || this.changeStatus[0] === '4') {
        return '/personal/edit/identity/change'
      } else if (this.changeStatus[0] === '2' || this.changeStatus[0] === '3') {
        // 防止眼花
        if (this.changeStatus[2] === '0') {
          return '/personal/edit/contacts/set'
        } else if (this.changeStatus[2] === '1') {
          return '/personal/edit/contacts/change'
        } else {
          console.log('changeStatus all 2')
          return '跳个蛇'
        }
      } else {
        console.log('changeStatus bad')
        return '皮这一下你真的快乐吗'
      }/*  else if (this.changeStatus[0] === '4') {
        return '/personal/edit/identity/update'
      } */
    }
  }
}
</script>

<style scoped>
.identity-wrapper {
  background: #fff;
  /*min-height: 771px;*/
  padding: 40px;
  padding-bottom: 0;
}

.person-info {
  margin-top: 60px;
  padding-bottom: 40px;
  width: 400px;
  border-bottom: 1px solid #e6e6e6;
}

.person-title {
  height: 22px;
}

.person-title:after {
  content: '';
  width: 0;
  height: 0;
  display: block;
  clear: both;
  visibility: hidden;
}

.person-title-text {
  float: left;
  line-height: 22px;
  font-size: 16px;
  color: #333;
  font-weight: bold;
}

.person-title-tip {
  float: left;
  margin-left: 16px;
}

.person-title-tip:after {
  content: '';
  width: 0;
  height: 0;
  display: block;
  clear: both;
  visibility: hidden;
}

.tip-warning {
  float: left;
  width: 14px;
  height: 14px;
  margin-top: 4px;
  position: relative;
}

.tip-icon-warning {
  float: left;
  width: 14px;
  height: 14px;
  background: url(../../../assets/images/personal/icon_warnning.png) no-repeat center;
  cursor: pointer;
}

.tip-warning-text {
  width: 264px;
  line-height: 19px;
  padding: 13px;
  font-size: 12px;
  color: #666;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  position: absolute;
  top: 100%;
  left: 0;
  transform: translateX(-50%);
  margin-left: 7px;
  margin-top: 14px;
}

.tip-triangle {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 6px solid #e6e6e6;
  position: absolute;
  top: -7px;
  left: 50%;
  margin-left: -5px;
}

.tip-triangle:after {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 6px solid #fff;
  position: absolute;
  top: 1px;
  left: -5px;
}

.tip-text {
  float: left;
  height: 17px;
  line-height: 17px;
  font-size: 12px;
  color: #e74c3c;
  margin: 2px 0 0 7px;
}

.person-row {
  line-height: 20px;
  margin-top: 24px;
  overflow: hidden;
}

.person-key {
  float: left;
  width: 115px;
  font-size: 14px;
  color: #666;
}

.person-value {
  float: left;
  color: #333;
}

.person-key-id {
  float: left;
  width: 120px;
}

.school-info {
  margin-top: 40px;
}

.tips {
  font-size: 14px;
  color: #FF600A;
}

.btn-authenticate {
  width: 110px;
  height: 40px;
  font-size: 14px;
  color: #fff;
  border: none;
  background-color: #ff600a;
  margin-top: 72px;
  cursor: pointer;
}

.btn-authenticate:hover {
  background-color: #ff3c00;
}

.btn-authenticate:active {
  background-color: #e83700;
}

.personal-identity-review {
  margin-top: 100px;
}

.identity-review-ing {
  width: 300px;
  height: 200px;
  margin: 0 auto;
  background: url(../../../assets/images/personal/illustration_in_eview.png) no-repeat center;
}

.identity-review-title {
  height: 22px;
  line-height: 22px;
  font-size: 16px;
  color: #666;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 16px;
}

.identity-review-fail {
  width: 300px;
  height: 200px;
  margin: 0 auto;
  background: url(../../../assets/images/personal/illustration_fail_review.png) no-repeat center;
}

.identity-review-tip {
  line-height: 24px;
  font-size: 14px;
  color: #a5a5a5;
  text-align: center;
}

.btn-wrap {
  height: 46px;
  margin-top: 40px;
  text-align: center;
}
</style>
